<template>
	<view class="conter">
		<!-- 背景图 -->
		<view class="arrow"></view>
		<!-- 背景图 -->
		<view style="margin-top: -230rpx">
			<!-- 轮播图 -->
			<view class="swiper-box">
				<u-swiper bgColor="#000" height="420rpx" :list="list" @click="clickSwiper" circular indicator indicatorMode="dot"></u-swiper>
			</view>
			<!-- 轮播图 -->
			<!-- 列表 -->
			<view class="list_box">
				<view @click="goInfo">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/announcement.png'" mode=""></image>
				</view>
				<view @click="gomarket">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/market.png'" mode=""></image>
				</view>
				<view @click="ak47papapa">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/number.png'" mode=""></image>
				</view>
				<view @click="ak47papapa">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/mall.png'" mode=""></image>
				</view>
				<view @click="ak47papapa">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/machine.png'" mode=""></image>
				</view>
				<view @click="ak47papapa">
					<image style="width: 206rpx; height: 206rpx" :src="imgUrl + '/static/index/duck.png'" mode=""></image>
				</view>
			</view>

			<!-- 列表 -->
			<!-- 我的 -->
			<view @click="gomy" class="my_box"></view>
			<!-- 我的 -->
			<!-- 热门推荐 -->
			<view class="foot-box">
				<view class="foot-box-title">
					<view class="" style="display: flex">
						<view class="">
							<image style="width: 47rpx; height: 63rpx" :src="imgUrl + '/static/index/Mimic.png'" mode=""></image>
						</view>
						<view style="margin-left: 10rpx; margin-top: 12rpx">热门推荐</view>
					</view>
					<view class="" style="margin-top: -20rpx" @click="goDuckInfo">
						<image style="width: 228rpx; height: 84rpx" src="../../static/images/goduck.png" mode=""></image>
					</view>
				</view>
				<view class="phuntow" v-for="(item, index) in gillList" :key="index">
					<view class="" style="position: absolute; top: 42rpx; left: 40rpx; z-index: 1" :style="{ display: countdownFinished ? 'none' : 'block' }">
						<u-count-down @finish="handleCountdownFinish" :time="item.presellTime" format="HH:mm:ss"></u-count-down>
					</view>
					<view @click="gopurchase(item)" class="aktutu">
						<image class="aktutu" :src="imgUrl + item.drawVideo"></image>
					</view>

					<view class="price">
						<view class="duck">《GO GO Duck》</view>
						<view class="prixce">
							<view style="font-size: 31rpx; margin-top: 15rpx">￥</view>
							<view>{{ item.price }}</view>
							<view style="font-size: 31rpx; margin-top: 18rpx">.00</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 热门推荐 -->
			<realname v-if="isDialogVisible" @closeDialog="closeDialog"></realname>
		</view>
	</view>
</template>

<script>
import HeadNav from '../../components/HeadNav/HeadNav.vue';
import { getUserAdmin } from '@/utils/auth';
import floatMon from '../../components/floatMon/floatMon.vue';
import { rotationChart, updateVersion } from '@/api/index.js';
import { getCollectionList } from '@/api/starting/index.js';
import realname from '../../components/real/realname.vue';
import config from '@/config';
const imgUrl = config.imgUrl;
export default {
	components: {
		HeadNav,
		floatMon,
		realname
	},
	data() {
		return {
			show: true,
			// 轮播图 只是展示，该list为图片list
			list: [],
			// 轮播图 这个里边存有带图片的所有信息如id，当点击轮播图的时候拿到当前点击轮播图的indx，来list1中匹配对应的id
			list1: [],
			imgUrl: config.imgUrl,
			countdownFinished: false,
			gillList: [],
			isDialogVisible: false,
			dialogValue: null,
			loginUrl: config.loginUrl
		};
	},
	onHide() {
		this.show = false;
	},
	onShow() {
		this.show = true;
	},
	onLoad() {
		// 获取轮播图
		this.getRotationChart();
		let oldVersion = uni.getStorageSync('oldversion');
		if (!oldVersion) {
			this.checkVersion();
		}
	},
	created() {
		this.getCollectionList();
	},
	methods: {
		goDuckInfo() {
			uni.navigateTo({
				url: '/pages/webView/indexView?url=' + this.loginUrl
			});
		},
		handleCountdownFinish() {
			this.countdownFinished = true;
		},
		// 首发
		async getCollectionList() {
			let param = {};
			param.subject = '';
			const data = await getCollectionList(param);

			if (data.code === 200) {
				this.gillList = data.data;
				// console.log(this.gillList, '列表');
				this.gillList.forEach((item) => {
					const startDate = new Date();
					const endDate = new Date(item.presellTime);
					const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
					item.presellTime = Math.floor(timeDiff);
				});
			} else if (data.code === 101) {
				this.gillList = [];
			} else {
				this.$showToast(data.msg);
			}
		},
		//初始化
		async checkVersion() {
			const data = await updateVersion();
			// console.log(data, '版本更新');
			//模拟接口获取最新版本号，版本号固定为整数
			const newVersionCode = data.data[0].androidVersionNumber; //线上最新版本号
			const selfVersionCode = uni.getSystemInfoSync().appVersion; //当前App版本号
			// console.log(newVersionCode,selfVersionCode);
			if (selfVersionCode !== newVersionCode) {
				let platform = uni.getSystemInfoSync().platform; //手机平台
				//安卓手机弹窗升级
				if (platform === 'android') {
					uni.navigateTo({
						url: `/pages/work/upgrade?downUrl=${data.data[0].releaseUrl}&androidUpdateDescription=${data.data[0].androidUpdateDescription}&newVersionCode=${data.data[0].androidVersionNumber}`
					});
				}
			}
		},
		async getRotationChart() {
			const res = await rotationChart();
			if (res.code == 200) {
				this.list = res.data.map((i) => imgUrl + i.coverUrl);
				this.list1 = res.data;
			}
		},

		clickSwiper(index) {
			let data = this.list1[index];
		},
		async gopurchase(item) {
			let userDetail = await getUserAdmin();
			if (userDetail.isRealName !== 1) {
				this.isDialogVisible = true;
			} else {
				uni.navigateTo({
					url: `/pages/HomeOrder/purchase?id=${item.id}` // 跳转到目标页面的路径
				});
			}
			// this.$modal.showToast('暂无热卖藏品');
		},
		closeDialog() {
			this.isDialogVisible = false;
		},
		goInfo() {
			uni.navigateTo({
				url: '/pages/goInfo/goInfo' //公告
			});
		},
		gomarket() {
			uni.switchTab({
				url: '/pages/work/market' //市场
			});
		},
		gomy() {
			uni.switchTab({
				url: '/pages/work/home' //我的
			});
		},
		ak47papapa() {
			this.$modal.showToast('暂未开放');
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	font-size: 52rpx;
	font-family: 'index';
	font-weight: 800;
	color: red;
}
.conter {
	width: 100%;
	height: 100%;
	background-color:#1c213a;
	.arrow {
		width: 750rpx;
		height: 434rpx;
		background-size: cover;
		background-image: url('../../static/newImage/login-bgi.png');
	}

	.swiper-box {
		width: 680rpx;
		height: 420rpx;
		margin: 0 34.88rpx;
	}

	.list_box {
		width: 680rpx;
		height: 470rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 34.88rpx 34.88rpx 0;
	}

	.my_box {
		width: 680rpx;
		height: 124rpx;
		margin: 20rpx 34.88rpx 0;
		background-size: cover;
		background-image: url(../../static/index/my.png);
	}

	.foot-box {
		padding: 66.28rpx 34.88rpx;

		.foot-box-title {
			display: flex;
			justify-content: space-between;
			font-size: 44rpx;
			font-family: 'index';
			font-weight: 400;
			color: #ffffff;
		}

		.phuntow {
			width: 680rpx;
			height: 811rpx;
			background: #13171c;
			border-radius: 23rpx;
			opacity: 1;
			margin: 43.6rpx 0 0;
			position: relative;

			.aktutu {
				width: 680rpx;
				height: 680rpx;
				border-radius: 23rpx;
			}

			.price {
				display: flex;
				justify-content: space-between;
				color: #ffffff;
				padding: 45rpx 34.88rpx 0 5rpx;
				font-size: 52rpx;
				font-family: 'index';
				font-weight: 400;

				.prixce {
					display: flex;
				}
			}
		}
	}
}
</style>
